<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '快递柜',
  },
}
</route>

<template>
  <view class="min-h-screen bg-white px-4 pt-4">
    <!-- 柜子信息 -->
    <view class="text-center mb-2 mt-10">
      <view class="text-lg font-medium mb-1">205房张先生家快递柜</view>
      <view class="text-gray-400 text-sm">编号: KDGO0001234</view>
    </view>

    <!-- 费用卡片 -->
    <view style="background-color: #655cf3" class="mt-18 rounded-xl p-14 text-white">
      <view class="flex items-center justify-between mb-8">
        <view class="flex items-center">
          <view class="w-1 h-5 rounded-full border-2 border-white"></view>
          <text class="text-xl font-medium">扣出:</text>
          <text class="text-xl font-medium">0.5元</text>
        </view>
        <text>(余额:¥1000)</text>
      </view>
      <view class="text-right" @click="goToRecharge">
        <text class="text-black text-6">去充值</text>
      </view>
    </view>

    <!-- PLUS会员提示 -->
    <!-- <view
      class="mt-4 bg-gradient-to-r from-yellow-400 to-yellow-300 rounded-xl p-3 flex items-center justify-between"
    >
      <view class="flex items-center" @click="goToMembershipCard">
        <uni-icons type="crown" size="20" color="#000"></uni-icons>
        <text class="ml-2">开通PLUS会员更优惠</text>
      </view>
      <uni-icons type="right" size="16"></uni-icons>
    </view> -->

    <!-- 开柜按钮 -->
    <view class="fixed bottom-8 left-4 right-4">
      <button
        style="background-color: #655cf3"
        class="w-full text-white py-2 rounded-lg"
        @click="handleOpen"
      >
        开柜
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
const goBack = () => {
  uni.navigateBack()
}

const handleOpen = () => {
  uni.showToast({
    title: '开柜成功',
    icon: 'success',
  })
}

const goToMembershipCard = () => {
  uni.navigateTo({
    url: '/pages/membershipCard/index',
  })
}
const goToRecharge = () => {
  uni.navigateTo({
    url: '/pages/Rechargeable/index',
  })
}
</script>

<style>
page {
  background-color: #ffffff;
}
</style>
